<template>
  <view class="carpool-form">
    <form class="carpool-details" @submit.prevent>
      <!-- 起点 -->
      <view class="form-group">
        <label for="start" class="visually-hidden">起点</label>
        <input
          type="text"
          id="start"
          class="form-input"
          placeholder="点击选择起点"
          v-model="startLocation"
          readonly
          @click="selectLocation('start')"
          tabindex="0"
        />
      </view>

      <!-- 终点 -->
      <view class="form-group">
        <label for="destination" class="visually-hidden">终点</label>
        <input 
          type="text" 
          id="destination" 
          class="form-input"
          placeholder="点击选择终点"
          v-model="endLocation"
          readonly
          @click="selectLocation('end')"
          tabindex="0"
        />
      </view>

      <!-- 出发日期 -->
      <view class="form-group">
        <label for="departure-date" class="visually-hidden">预计出发日期</label>
        <button 
          type="button" 
          id="departure-date" 
          class="form-input time-picker-btn"
          @click="onShowDatePicker('departure')"
        >
          出发日期{{ departureDate ? departureDate : '' }}
        </button>
      </view>

      <!-- 出发时间 -->
      <view class="form-group">
        <label for="departure-time" class="visually-hidden">预计出发时间</label>
        <button 
          type="button" 
          id="departure-time" 
          class="form-input time-picker-btn"
          @click="onShowTimePicker('departure')"
        >
          出发时间{{ departureTime ? departureTime : '' }}
        </button>
      </view>

      <!-- 到达日期 -->
      <view class="form-group">
        <label for="arrival-date" class="visually-hidden">预计到达日期</label>
        <button 
          type="button" 
          id="arrival-date" 
          class="form-input time-picker-btn"
          @click="onShowDatePicker('arrival')"
        >
          到达日期{{ arrivalDate ? arrivalDate : '' }}
        </button>
      </view>

      <!-- 到达时间 -->
      <view class="form-group">
        <label for="arrival-time" class="visually-hidden">预计到达时间</label>
        <button 
          type="button" 
          id="arrival-time" 
          class="form-input time-picker-btn"
          @click="onShowTimePicker('arrival')"
        >
          到达时间{{ arrivalTime ? arrivalTime : '' }}
        </button>
      </view>

      <!-- 活动人数 -->
      <view class="form-group">
        <label for="passenger-count" class="visually-hidden">活动人数</label>
        
        <view class="passenger-count-control">
          <span class="passenger-text">活动人数</span>
          <button type="button" class="control-btn" @click="decrementPassengerCount">−</button>
          <span class="passenger-count">{{ passengerCount }}</span>
          <button type="button" class="control-btn" @click="incrementPassengerCount">+</button>
        </view>
      </view>


      <!-- 确认按钮 -->
      <view class="form-group">
        <button 
          type="button" 
          class="confirm-button"
          @click="confirmDetails"
        >
          确认
        </button>
      </view>
    </form>

    <!-- 日期选择器 -->
    <mx-date-picker 
      :show="showPicker" 
      :type="type" 
      :value="value" 
      :show-tips="true" 
      :begin-text="'开始选择'" 
      :end-text="'结束选择'" 
      :show-seconds="type === 'time'" 
      @confirm="onSelected" 
      @cancel="onSelected" 
    />
  </view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";

export default {
  components: {
    MxDatePicker  // 注册子组件
  },
  data() {
    return {
      startLocation: '',  // 起点名称
      endLocation: '',    // 终点名称
      departureDate: '',  // 出发日期
      departureTime: '',  // 出发时间
      arrivalDate: '',    // 到达日期
      arrivalTime: '',    // 到达时间
      passengerCount: 1,  // 活动人数

      showPicker: false,
      type: '',           // 用来区分是日期还是时间
      value: '',          // 用来保存选中的日期或时间值
      selectedType: '',   // 用来标识选择的是“出发”还是“到达”
    };
  },
  methods: {
    // 显示日期选择器，区分出发日期和到达日期
    onShowDatePicker(type) {
      this.selectedType = type; // 设置标识是出发日期还是到达日期
      this.type = 'date';  // 设定为日期选择器
      this.showPicker = true;
      this.value = this[type + 'Date'] || '';  // 将当前选中的日期值赋给选择器的初始值
    },

    // 显示时间选择器，区分出发时间和到达时间
    onShowTimePicker(type) {
      this.selectedType = type; // 设置标识是出发时间还是到达时间
      this.type = 'time';  // 设定为时间选择器
      this.showPicker = true;
      this.value = this[type + 'Time'] || '';  // 将当前选中的时间值赋给选择器的初始值
    },

    // 选择地点
    selectLocation(type) {
      uni.chooseLocation({
        success: (res) => {
          if (type === 'start') {
            this.startLocation = res.name || res.address;
          } else if (type === 'end') {
            this.endLocation = res.name || res.address;
          }
          console.log('选择地点:', res);
        },
        fail: (err) => {
          console.error('选点失败:', err);
        },
      });
    },

    // 选择日期或时间
    onSelected(e) {
      this.showPicker = false;  // 隐藏日期选择器
      if (e) {
        if (this.selectedType === 'departure') {
          // 选择的是出发日期或时间
          if (this.type === 'date') {
            this.departureDate = e.value;
          } else if (this.type === 'time') {
            this.departureTime = e.value;
          }
        } else if (this.selectedType === 'arrival') {
          // 选择的是到达日期或时间
          if (this.type === 'date') {
            this.arrivalDate = e.value;
          } else if (this.type === 'time') {
            this.arrivalTime = e.value;
          }
        }
        console.log('选择的值 =>', e.value);
      }
    },
// 增加活动人数
    incrementPassengerCount() {
      if (this.passengerCount < 10) {  // 你可以限制最大人数
        this.passengerCount++;
      }
    },

    // 减少活动人数
    decrementPassengerCount() {
      if (this.passengerCount > 1) {  // 活动人数不能小于1
        this.passengerCount--;
      }
    },
    // 确认填写的信息
    confirmDetails() {
      if (!this.startLocation || !this.endLocation || !this.departureDate || !this.departureTime || !this.arrivalDate || !this.arrivalTime) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
        });
        return;
      }
      uni.showToast({
        title: '信息已确认',
        icon: 'success',
      });
      console.log('提交信息:', {
        起点: this.startLocation,
        终点: this.endLocation,
        出发日期: this.departureDate,
        出发时间: this.departureTime,
        到达日期: this.arrivalDate,
        到达时间: this.arrivalTime,
        活动人数: this.passengerCount,
      });
    },
  },
};
</script>


<style scoped>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.carpool-form {
  background: #fff;
  display: flex;
  max-width: 480px;
  width: 100%;
  padding-bottom: 345px;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  margin: 0 auto;
}

.form-input {
  border-radius: 29px;
  background: #fff;
  width: 374px;
  max-width: 100%;
  color: #000;
  text-align: center;
  padding: 22px 10px;
  font: 400 24px/1 PingFang SC, sans-serif;
  border: 1px solid #000;
  box-sizing: border-box; /* 使padding不影响输入框总宽度 */
  line-height: 1.5;  /* 设置行高，确保文字不被挤压 */
  margin-top: 49px;
  height: 45px; /* 确保输入框高度合适 */
}

.time-picker-btn {
  width: 374px;
  max-width: 100%;
  background-color: #fff;
  padding: 22px 10px;
  font: 400 24px/1 PingFang SC, sans-serif;
  border: 1px solid #000;
  border-radius: 29px;
  color: #000;
  text-align: center;
  box-sizing: border-box;
}

.confirm-button {
  background: #000;
  color: #fff;
  width: 374px;
  max-width: 100%;
  text-align: center;
  padding: 15px 0;
  font: 400 24px/1 PingFang SC, sans-serif;
  border: none;
  border-radius: 29px;
  margin-top: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.confirm-button:active {
  background: #333;
}

.confirm-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.passenger-count-control {
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px 16px;
  font-size: 20px;
  cursor: pointer;
}

.control-btn:focus {
  outline: none;
}

.passenger-count {
  margin: 0 16px;
  font-size: 18px;
}

.passenger-text {
  font-size: 18px;  /* 保持字体一致 */
  margin-left: 8px;  /* 给字样增加一些间距 */
  color: #000;       /* 设置为黑色 */
}
</style>